<div class="row">
    <div class="span6">
        <p style="margin-bottom: 10px">{@html __('teams / defaults / p') }</p>

        <FormBlock label="{__('teams / name' )}" help="{__('teams / name / help' )}">
            <input type="text" bind:value="team.name" placeholder="" />
        </FormBlock>

        <FormBlock
            label="{ __('teams / defaults / folder-status' ) }"
            help="{ __('teams / defaults / folder-status / p' ) }"
        >
            <RadioControl
                label=""
                bind:value="settings.folders"
                options="{[ {label: __('teams / defaults / expanded' ), value: 'expanded'}, {label: __('teams / defaults / collapsed' ), value: 'collapsed'}] }"
            />
        </FormBlock>

        <h3>{ __('teams / defaults / h3') }</h3>

        <FormBlock
            label="{ __('teams / defaults / theme' ) }"
            help="{ __('teams / defaults / theme / p' ) }"
        >
            <SelectInput bind:value="defaultTheme" options="{themes}" />
        </FormBlock>

        <FormBlock
            label="{ __('teams / defaults / folder' ) }"
            help="{ __('teams / defaults / folder / p' ) }"
        >
            <SelectInput bind:value="settings.default.folder" options="{folders}" />
        </FormBlock>

        <FormBlock
            label="{ __('teams / defaults / locale' ) }"
            help="{ __('teams / defaults / locale / p' ) }"
        >
            <SelectInput bind:value="settings.default.locale" options="{localeOptions}" />
        </FormBlock>

        <FormBlock
            label="{ __('teams / defaults / embedcode' ) }"
            help="{ __('teams / defaults / embedcode / p' ) }"
        >
            <RadioControl
                label=""
                bind:value="settings.embed.preferred_embed"
                options="{embedCodes}"
            />
        </FormBlock>

        {#if settings.embed.preferred_embed == "custom"}
        <h3>Custom Embed Code</h3>

        <FormBlock label="{ __('teams / custom / title' ) }" help="">
            <input
                type="text"
                bind:value="settings.embed.custom_embed.title"
                placeholder="e.g. Custom CMS Embed"
            />
        </FormBlock>

        <FormBlock label="{ __('teams / custom / help' ) }" help="">
            <textarea
                bind:value="settings.embed.custom_embed.text"
                placeholder="e.g. This is a custom embed code for our CMS"
            />
        </FormBlock>

        <FormBlock
            label="{ __('teams / custom / embedcode' ) }"
            help="{ __('teams / custom / embedcode / help' ) }"
        >
            <textarea
                class="embedcode"
                bind:value="settings.embed.custom_embed.template"
                placeholder='<iframe src="%chart_url%" width="%chart_width%" widthheight="%chart_height%"></iframe>'
            />
        </FormBlock>
        <hr />
        {/if} {#if initialized}
        <FormBlock
            label="{ __('teams / defaults / visualization-size' ) }"
            help="{ __('teams / defaults / visualization-size / help' ) }"
        >
            <div class="default-size">
                <input
                    type="number"
                    bind:value="settings.default.metadata.publish['embed-width']"
                    placeholder="600"
                />
                <span>×</span>
                <input
                    type="number"
                    bind:value="settings.default.metadata.publish['embed-height']"
                    placeholder="400"
                />
            </div>
        </FormBlock>
        {/if}

        <h3>{ __('teams / editor / h1' ) }</h3>

        <FormBlock
            label="{ __('teams / editor / preview-widths' ) }"
            help="{ __('teams / editor / preview-widths / help' ) }"
        >
            <PreviewWidths bind:value="settings.previewWidths" />
        </FormBlock>
    </div>
</div>
<script>
    import FormBlock from '@datawrapper/controls/FormBlock.html';
    import SelectInput from '@datawrapper/controls/SelectInput.html';
    import RadioControl from '@datawrapper/controls/RadioControl.html';
    import PreviewWidths from './PreviewWidths.html';
    import { __ } from '@datawrapper/shared/l10n';
    import set from '@datawrapper/shared/set';
    import get from '@datawrapper/shared/get';
    import arrayToObject from '@datawrapper/shared/arrayToObject';

    export default {
        components: { SelectInput, FormBlock, RadioControl, PreviewWidths },
        data() {
            return {
                initialized: false,
                embedCodes: [
                    { value: 'responsive', label: __('teams / defaults / responsive-iframe') },
                    { value: 'iframe', label: __('teams / defaults / iframe') },
                    { value: 'custom', label: __('teams / defaults / custom') }
                ],
                themes: [],
                folders: [],
                locales: [],
                defaultTheme: '',
                settings: {},
                team: {}
            };
        },
        computed: {
            localeOptions({ locales }) {
                return [
                    {
                        value: null,
                        label: __('teams / defaults / none', 'organizations')
                    },
                    ...locales
                ];
            }
        },
        helpers: { __ },
        oncreate() {
            const { settings } = this.get();
            const publishMeta = arrayToObject(get(settings, 'default.metadata.publish', {}));
            set(settings, 'default.metadata.publish', publishMeta);
            this.set({ settings, initialized: true });
        },
        onstate({ changed, current }) {
            if (current.settings && (changed.settings || changed.team || changed.defaultTheme)) {
                this.fire('change', {
                    team: current.team,
                    settings: current.settings,
                    defaultTheme: current.defaultTheme
                });
            }
        }
    };
</script>

<style>
    textarea.embedcode {
        font-family: 'Roboto Mono', monospace !important;
        width: 400px;
        line-height: 20px;
        height: 150px;
    }
    .default-size input {
        width: 45px;
    }
    .default-size span {
        margin: 0px 5px;
    }
</style>
